<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1>我是b页面</h1>
    <div class="box"></div>
    <script>
        // 获取a页面传递的参数
        // var color = window.location.search.split("=")[1];
        // // console.log(color);
        // // 把color的颜色 设置给div就可以了
        // document.querySelector(".box").style.background = color;


        // 接收字符串 转成对象 
        var str = window.location.search;
        console.log(str);


        // 可以把querystirng参数转成对象 ，给我一个固定格式的字符串 那么返还一个对象出来
        function s2o(str){
            // 第一步：把？去掉 
            // 1.slice 2.substr  3.substring
           var res =  str.slice(1);
           console.log(res);
            // 第二步： 把字符串通过 & 号切割成数组
            var arr = res.split("&");
            // console.log(arr);
            // 第三步循环数组 组成 一个新的对象
            var config = {};
            arr.forEach(function(item){
                // console.log(item);
                var lineArr = item.split("=");
                config[lineArr[0]] = lineArr[1];
            })
            console.log(config);
            return config;
        }
        s2o(str);

    </script>
</body>
</html>